<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Ace Editor</title>
    <style>
        #editor {
            width: 100%;
            height: 500px;
        }

        /* 调整折叠箭头的大小和颜色 */
        .ace_gutter-cell .ace_fold-widget {
            width: 11px; /* 默认宽度 */
            height: 11px; /* 默认高度 */
            background-color: #7f97f7; /* 设置折叠箭头的颜色 */
            border-radius: 1px; /* 可选：圆角效果 */
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-sql.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>
    <script type="module">
        import SqlFoldMode from './SqlFoldMode.js';

        const editor = ace.edit('editor');
        const sqlMode = new (ace.require('ace/mode/sql').Mode)();
        sqlMode.foldingRules = new SqlFoldMode();
        editor.session.setMode(sqlMode);
        editor.session.setFoldStyle('markbeginend');
        editor.setTheme('ace/theme/monokai');
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
    </script>
</head>
<body>
    <div id="editor">
        SELECT (column1, column2, column3)
        FROM table_name
        WHERE condition;

        SELECT column1, column2, column3
        FROM table_name
        WHERE condition;

        CASE WHEN condition1 THEN result1
        WHEN condition2 THEN result2
        ELSE result3
        END;

        nu AS (
        SELECT
        order_week,
        buyer_id
        FROM
        metrics.order
        WHERE
        weekly_new_users_flag_order = 1
        ),
    </div>
</body>
</html>
